<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
      <title>数据可视化-饼状图</title>
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;



option = {
  tooltip:{
    trigger:'item',
    formatter:"{a}</br>{b}:{c}({d}%)"
  },
    legend: {
        top: 'bottom',
      orient:'vertical',
      x:1100,
      y:200
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '详细信息：',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: [
              {value: 68, name: '醒酒丸'},
              {value: 79, name: '雪碧'},
              {value: 65, name: 'LOUIS_XIII_干邑'},
              {value: 135, name: '低浓度麦芽啤酒'},
              {value: 83, name: '中浓度麦芽啤酒'},
              {value: 180, name: '烤羊肉串'},
              {value: 112, name: '六大鸡尾酒-基酒'},
              {value: 122, name:  '百利来皇家XO干邑白兰地'},
              {value: 20, name:  '高浓度麦芽啤酒'},
              {value: 121, name: '水果大拼盘'},
              {value: 99, name: '水果小拼盘'},
              {value: 98, name: '烤牛排'},
              {value: 160, name:  '橙汁'},
              {value: 120, name:  '香槟'},
              {value: 150, name: '椰汁'},
              {value: 138, name: '百伦斯奶啤'},
              {value: 173, name:  '百伦斯周边-定制T恤'},
              {value: 158, name:  '百伦斯周边-定制帆布包'}
            ]
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>
